import { useState } from "react";
import { Button, Card, Table } from "antd";
import { BranchesOutlined } from "@ant-design/icons";
import BranchModal from "../BranchModal";
import styles from "./index.module.less";

interface BranchItem {
  key: string;
  name: string;
  description: string;
  creator: string;
  createTime: string;
  status: string;
}

const Branch: React.FC = () => {
  const [branchModalVisible, setBranchModalVisible] = useState(false);

  const handleCreateBranch = (values: any) => {
    console.log("创建分支:", values);
    setBranchModalVisible(false);
  };

  const columns = [
    {
      title: "分支名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "描述",
      dataIndex: "description",
      key: "description",
    },
    {
      title: "创建人",
      dataIndex: "creator",
      key: "creator",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
    },
  ];

  const data: BranchItem[] = [
    {
      key: "1",
      name: "master",
      description: "主分支",
      creator: "系统",
      createTime: "2024-01-01",
      status: "活跃",
    },
    {
      key: "2",
      name: "develop",
      description: "开发分支",
      creator: "张三",
      createTime: "2024-01-02",
      status: "活跃",
    },
  ];

  return (
    <div className={styles.container} data-oid="h6xiwhe">
      <div className={styles.header} data-oid="9s17qp.">
        <h1 data-oid="6lhzb7e">分支管理</h1>
        <Button
          type="primary"
          icon={<BranchesOutlined data-oid="67ur1lh" />}
          onClick={() => setBranchModalVisible(true)}
          data-oid="hg73a94"
        >
          新建分支
        </Button>
      </div>

      <Card data-oid="g67vyim">
        <Table
          columns={columns}
          dataSource={data}
          pagination={false}
          size="middle"
          data-oid="03g1ush"
        />
      </Card>

      <BranchModal
        visible={branchModalVisible}
        onCancel={() => setBranchModalVisible(false)}
        onSubmit={handleCreateBranch}
        data-oid="reuh4iz"
      />
    </div>
  );
};

export default Branch;
